<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2159432_t8dt2onta1.css">

    <style>
        
    </style>

</head>
<body>
        <div class="total">

            <div class="totalTop">

                <div class="TopLeft">

                    <div class="TopBg">
                        <img src="images/zu.png" style="margin-left: 6px;margin-top: 1.5px;">
                    </div>

                    <div class="BgSecond">
                        <img src="images/user.png" style="position: absolute;top: 30%;left:0;transform: translate(11px,-40%);">
                       <span style="position: absolute;top: 30%;left:0;transform: translate(35px,-50%);color: wheat;">黑侠 (光谷店)</span>
                        <img src="images/time.png" style="position: absolute;top: 70%;left:0;transform: translate(10px,-60%);">
                        <span style="position: absolute;top: 70%;left:0;transform: translate(35px,-60%);color: wheat;">2016-04-06 10:23 &nbsp;AM</span>
                        <!-- <img src="images/sideBg.png" style="width:100% ;height: 70px;box-shadow: 2px 5px 6px rgba(5, 5, 5, .15) inset;"> -->
                    </div>
                    
                    <div class="BgThird">
                        <img src="images/shouzhi.png" style="position: absolute;top: 124px;left: 10px;">
                        <span style="position: absolute;top: 122px;left: 35px;color: rgb(180, 180, 180);">收支明细</span>
                    </div>
                    
                    <div class="TopCenter">

                        <div>
                            <span>品名</span>
                            <span>数量</span>
                            <span>金额</span>
                            <span style="margin-right: 10px;">结算价</span>
                        </div>

                        <div>
                            <span>蛋挞</span>
                            <span id="num">5</span>
                            <span id="numSecond">60</span>
                            <span id="numThird">60</span>
                        </div>

                        <div>
                            <span style="margin-right: 18px;">全麦面包</span>
                            <span id="num">1</span>
                            <span id="numSecond" style="margin-left: 2px;">10.5</span>
                            <span id="numThird" style="margin-left: 0px;">10.5</span>
                        </div>

                        <div>
                            <span style="margin-right: 18px;">戚风蛋糕</span>
                            <span id="num">1</span>
                            <span id="numSecond">20</span>
                            <span id="numThird">20</span>
                        </div>

                        <div>
                            <span style="margin-right: 34px;">三明治</span>
                            <span id="num">5</span>
                            <span id="numSecond">60</span>
                            <span id="numThird">60</span>
                        </div>
                        
                        <img src="images/曾.png" style="position: absolute;top: 136px;left: 0;">


                </div>

                <div class="centerBg">
                            
                </div>

                <div class="centerBgLast">
                    <p>总额：<span>￥125.5</span></p>
                    <input type="text" placeholder="搜索商品">
                    <img src="images/Layer-6.png" style="position: absolute;bottom: 24%;right: 27%;">
                    <button style="position: absolute;width: 50px;height: 35px;border-radius: 40%;border: none;top: 63%;right: 10%;background:#fff url(images/fangdajing.png) no-repeat;background-position-x: 50%;background-position-y: 50%;background-size: 35%;"></button>
                </div>

                <div class="BlackBar">
                    <img src="images/close.png" style="margin-top: 20px;">
                    <img src="images/close.png" style="transform: rotate(45deg);margin-top: 17px;">
                    <div class="cut"><hr></div>
                    <div class="donate"><img src="images/搜.png" style="margin-top: 0;box-sizing: border-box;"></div>
                    <img src="images/修改.png" style="margin-top: 117px;">
                    <img src="images/12.png" style="margin-top: 20px;">
                    <img src="images/121.png" style="margin-top: 20px;">
                </div>

                </div>

                <div class="TopRight">

                    <div class="TopBg">
                    </div>             
                    
                    <div class="RightFirst">

                        <span style="left: 0;top: 0;background-color: orangered;color: #fff;">戚风蛋糕</span>
                        <span style="left: 19%;top: 0;">蛋挞</span>
                        <span style="left: 38%;top: 0;">全麦面包</span>
                        <span style="left: 57%;top: 0;">戚风蛋糕</span>
                        <span style="left: 76%;top: 0;">三明治</span>
                        <span class="iconfont icon-qiehuan" style="width: 60px;font-size:25px;top: 0;right: 0;"></span>

                    </div>

                    <div style="position: relative;margin-left: auto;margin-right: auto;width: 97%;height: 700px;">
                    <div class="RightOfLeft">

                    </div>

                    <div class="RightOfRight">
                        <hr style="margin-top:30px;background-color: red;width: 800px;height: 2px;border: 0;">

                        <a href="#">
                            <div>
                                <p>0001</p>
                                <p>巧克力蛋糕</p>
                            </div>
                            <div style="border: 2px solid red;box-shadow: 4px 3px 4px rgba(233, 22, 22, 0.904);">
                                <p>0001</p>
                                <p>巧克力蛋糕</p>
                            </div>
                            <div>
                                <p>0001</p>
                                <p>巧克力蛋糕</p>
                            </div>
                            <div>
                                <p>0001</p>
                                <p>巧克力蛋糕</p>
                            </div>
                            <div>
                                <p>0001</p>
                                <p>巧克力蛋糕</p>
                            </div>
                        </a>

                    </div>
                </div>

                </div>

            </div>


            <div class="totalBottom">

                <div class="BottomContent">
                    <p style="color: #fff;margin-top: 5px;margin-left: -15px;">会员信息：</p>
                    <div class="ContentPic">

                        <div>
                            <img src="images/15.png">
                            <p>管理台</p>
                        </div>
                        
                       <div>
                        <img src="images/gouwu.png">
                        <p>购物卡</p>
                    </div>

                        <div>
                        <img src="images/huiyuan.png">
                        <p>会员</p>
                    </div>

                        <div>
                        <img src="images/cuxiao.png">
                        <p>促销</p>
                    </div>

                    

                    <div class="clock">
                        
                        <img src="images/clock.png">
                        <p style="margin-top: 2px;">预定</p>
                    </div>

                    <div>
                        
                        <img src="images/change.png" style="background-color:  #333;border-radius: 50%;">
                        <p>交班</p>
                    </div>

                    <div>
                        <img src="images/guadan.png">
                        <p>挂单</p>
                        
                        </div>

                    </div>
                       
                       

                       
                       <!-- <i class="iconfont icon-naozhong"></i> -->
                       <div class="btn">
                        <input type="button" value="收银">
                       </div>

                    <div class="BottomText">
                        
                        
                        
                        
                        
                        
                        
                    </div>

                </div>

            </div>
        </div>
</body>
</html>